import React, { Component } from "react";

export default class App extends Component {
  // 定义响应数据
  state = {
    count: 0,
  };

  // 修改count
  add = () => {
    /**
     * setState()方法：第一个参数是对象语法
     * 1. 是异步=》先执行同步代码，后执行异步代码
     * 2. 多次执行setState()=>批处理覆盖前边的=》只执行最后一次
     */
    this.setState(
      {
        count: this.state.count + 1,
      },
      function () {
        console.log("获取最新的count：", this.state.count);
      }
    );
    console.log("获取上一次的count：", this.state.count);
    this.setState({
      count: this.state.count + 2,
    });
    this.setState({
      count: this.state.count + 3,
    });
  };

  add2 = () => {
    /**
     * setState()方法：第一个参数是函数语法
     * 1. 是异步=》先执行同步代码，后执行异步代码
     * 2. 多次执行setState()=>批量处理
     */
    /**
     * state => 最新的state
     * props => 最新的props
     */
    this.setState(
      (state, props) => {
        console.log("回调参数：", state, props);
        return { count: state.count + 1 };
      },
      () => {
        console.log("获取最新的count：", this.state.count);
      }
    );
    console.log("获取上一次的count：", this.state.count);
    this.setState((state, props) => {
      // console.log("回调参数：", state, props);
      return { count: state.count + 2 };
    });
    this.setState((state, props) => {
      // console.log("回调参数：", state, props);
      return { count: state.count + 3 };
    });
  };

  render() {
    return (
      <div>
        <h1>setState()方法详解</h1>
        <p>{this.state.count}</p>
        <button onClick={this.add}>第一个参数是对象</button>
        <button onClick={this.add2}>第一个参数是函数</button>
      </div>
    );
  }
}
